{% extends 'migration_app/base.html' %}
{% load static %}

{% block extra_css %}
<style>
    .sidebar {
        background-color: #212529;
        min-height: 100vh;
        color: white;
        position: fixed;
        width: 250px;
        z-index: 100;
        overflow-y: auto;
    }
    
    .main-content {
        margin-left: 250px;
        padding: 20px;
    }
    
    .sidebar-heading {
        padding: 1.5rem 1rem;
        font-size: 1.2rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .sidebar-menu {
        padding: 0;
        list-style: none;
        margin: 0;
    }
    
    .sidebar-menu li a {
        display: block;
        padding: 0.8rem 1rem;
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        transition: all 0.3s;
    }
    
    .sidebar-menu li a:hover,
    .sidebar-menu li a.active {
        color: white;
        background-color: rgba(255, 255, 255, 0.1);
    }
    
    .sidebar-menu li a i {
        margin-right: 10px;
        width: 20px;
        text-align: center;
    }
    
    .sidebar-menu .nav-item-header {
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.5);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .card {
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }
    
    .card-header {
        background-color: #fff;
        border-bottom: 1px solid rgba(0, 0, 0, 0.125);
        font-weight: bold;
    }
    
    .stat-card {
        border-left: 5px solid;
        transition: transform 0.3s;
    }
    
    .stat-card:hover {
        transform: translateY(-5px);
    }
    
    .stat-card-primary {
        border-left-color: #0d6efd;
    }
    
    .stat-card-success {
        border-left-color: #198754;
    }
    
    .stat-card-warning {
        border-left-color: #ffc107;
    }
    
    .stat-card-danger {
        border-left-color: #dc3545;
    }
    
    .stat-card-info {
        border-left-color: #0dcaf0;
    }
    
    .table-responsive {
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .status-badge {
        font-size: 0.8rem;
        padding: 0.35em 0.65em;
    }
    
    .footer {
        margin-left: 250px;
        padding: 1rem;
        text-align: center;
        background-color: #f8f9fa;
        border-top: 1px solid #e9ecef;
    }
    
    .sidebar-submenu {
        display: none;
        list-style: none;
        padding-left: 0;
        margin: 0;
        background-color: rgba(0, 0, 0, 0.2);
    }
    
    .sidebar-submenu.show {
        display: block;
    }
    
    .sidebar-submenu li a {
        padding: 0.6rem 1rem 0.6rem 3rem;
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.7);
    }
    
    .sidebar-submenu li a i {
        font-size: 0.9em;
    }
    
    .submenu-arrow {
        float: right;
        transition: transform 0.3s;
    }
    
    .has-submenu.open .submenu-arrow {
        transform: rotate(180deg);
    }
    
    .submenu-toggle {
        cursor: pointer;
    }
    
    .submenu-toggle.no-loader {
        pointer-events: auto !important;
    }
</style>
{% endblock %}

{% block content %}
<!-- 侧边栏 -->
<div class="sidebar">
    <div class="sidebar-heading">
        <i class="fas fa-database"></i> Oracle到PolarDB-PG迁移
    </div>
    <ul class="sidebar-menu">
        <li>
            <a href="{% url 'migration_app:dashboard' %}" class="{% if request.resolver_match.url_name == 'dashboard' %}active{% endif %}">
                <i class="fas fa-tachometer-alt"></i> 仪表盘
            </a>
        </li>
        
        <!-- 任务管理部分 -->
        <li class="nav-item-header">任务管理</li>
        <li>
            <a href="{% url 'migration_app:task_list' %}" class="{% if request.resolver_match.url_name == 'task_list' %}active{% endif %}">
                <i class="fas fa-tasks"></i> 迁移任务列表
            </a>
        </li>
        <li>
            <a href="{% url 'migration_app:create_task' %}" class="{% if request.resolver_match.url_name == 'create_task' %}active{% endif %}">
                <i class="fas fa-plus-circle"></i> 创建任务
            </a>
        </li>
        
        <!-- 数据库管理部分 -->
        <li class="nav-item-header">数据库管理</li>
        <li>
            <a href="{% url 'migration_app:database_info' %}" class="{% if request.resolver_match.url_name == 'database_info' %}active{% endif %}">
                <i class="fas fa-server"></i> 数据库连接
            </a>
        </li>
        <li class="has-submenu {% if 'oracle_' in request.resolver_match.url_name %}open{% endif %}">
            <a href="javascript:void(0);" class="submenu-toggle">
                <i class="fas fa-database"></i> Oracle数据库
                <i class="fas fa-chevron-down submenu-arrow"></i>
            </a>
            <ul class="sidebar-submenu" {% if 'oracle_' in request.resolver_match.url_name %}style="display: block;"{% endif %}>
                <li>
                    <a href="{% url 'migration_app:oracle_schemas' %}" class="{% if request.resolver_match.url_name == 'oracle_schemas' %}active{% endif %}">
                        <i class="fas fa-table"></i> 架构管理
                    </a>
                </li>
                <li>
                    <a href="{% url 'migration_app:oracle_tables' %}" class="{% if request.resolver_match.url_name == 'oracle_tables' %}active{% endif %}">
                        <i class="fas fa-th-list"></i> 表管理
                    </a>
                </li>
                <li>
                    <a href="{% url 'migration_app:oracle_users' %}" class="{% if request.resolver_match.url_name == 'oracle_users' %}active{% endif %}">
                        <i class="fas fa-users"></i> 用户管理
                    </a>
                </li>
                <li>
                    <a href="{% url 'migration_app:oracle_database_management' %}" class="{% if request.resolver_match.url_name == 'oracle_database_management' %}active{% endif %}">
                        <i class="fas fa-plug"></i> 数据库连接
                    </a>
                </li>
            </ul>
        </li>
        <li class="has-submenu {% if 'pg_' in request.resolver_match.url_name %}open{% endif %}">
            <a href="javascript:void(0);" class="submenu-toggle">
                <i class="fas fa-database"></i> PolarDB-PG
                <i class="fas fa-chevron-down submenu-arrow {% if 'pg_' in request.resolver_match.url_name %}rotated{% endif %}"></i>
            </a>
            <ul class="sidebar-submenu" {% if 'pg_' in request.resolver_match.url_name %}style="display: block;"{% endif %}>
                <li>
                    <a href="{% url 'migration_app:pg_schemas' %}" class="{% if request.resolver_match.url_name == 'pg_schemas' %}active{% endif %}">
                        <i class="fas fa-table"></i> 架构管理
                    </a>
                </li>
                <li>
                    <a href="{% url 'migration_app:pg_tables' %}" class="{% if request.resolver_match.url_name == 'pg_tables' %}active{% endif %}">
                        <i class="fas fa-th-list"></i> 表管理
                    </a>
                </li>
                <li>
                    <a href="{% url 'migration_app:pg_users' %}" class="{% if request.resolver_match.url_name == 'pg_users' %}active{% endif %}">
                        <i class="fas fa-users"></i> 用户管理
                    </a>
                </li>
                <li>
                    <a href="{% url 'migration_app:pg_database_management' %}" class="{% if request.resolver_match.url_name == 'pg_database_management' %}active{% endif %}">
                        <i class="fas fa-plug"></i> 数据库连接
                    </a>
                </li>
            </ul>
        </li>
        
        <!-- 配置管理部分 -->
        <li class="nav-item-header">系统配置</li>
        <li class="has-submenu {% if 'settings' in request.resolver_match.url_name %}open{% endif %}">
            <a href="javascript:void(0);" class="submenu-toggle">
                <i class="fas fa-cogs"></i> 参数配置
                <i class="fas fa-chevron-down submenu-arrow"></i>
            </a>
            <ul class="sidebar-submenu" {% if 'settings' in request.resolver_match.url_name %}style="display: block;"{% endif %}>
                <li>
                    <a href="{% url 'migration_app:migration_settings' %}" class="{% if request.resolver_match.url_name == 'migration_settings' %}active{% endif %}">
                        <i class="fas fa-sliders-h"></i> 迁移参数
                    </a>
                </li>
                <li>
                    <a href="{% url 'migration_app:system_settings' %}" class="{% if request.resolver_match.url_name == 'system_settings' %}active{% endif %}">
                        <i class="fas fa-wrench"></i> 系统参数
                    </a>
                </li>
            </ul>
        </li>
        <li>
            <a href="{% url 'migration_app:migration_logs' %}" class="{% if request.resolver_match.url_name == 'migration_logs' %}active{% endif %}">
                <i class="fas fa-history"></i> 迁移日志
            </a>
        </li>
        <li>
            <a href="{% url 'migration_app:help' %}" class="{% if request.resolver_match.url_name == 'help' %}active{% endif %}">
                <i class="fas fa-question-circle"></i> 帮助文档
            </a>
        </li>
        <li>
            <a href="{% url 'admin:index' %}">
                <i class="fas fa-cog"></i> 系统管理
            </a>
        </li>
    </ul>
</div>

<!-- 主内容 -->
<div class="main-content">
    <div class="container-fluid">
        <div class="row mb-4">
            <div class="col-12">
                <h1 class="h2">{% block page_title %}仪表盘{% endblock %}</h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{% url 'migration_app:dashboard' %}">首页</a></li>
                        {% block breadcrumb %}{% endblock %}
                    </ol>
                </nav>
                <hr>
            </div>
        </div>
        
        {% block dashboard_content %}{% endblock %}
    </div>
</div>

<!-- 页脚 -->
<div class="footer">
    <p class="mb-0">&copy; 2023 Oracle到PolarDB-PG迁移平台 | 版本 1.0.0</p>
</div>

{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有带有子菜单的菜单项
    const submenuToggles = document.querySelectorAll('.submenu-toggle');
    
    // 为每个菜单项添加点击事件
    submenuToggles.forEach(function(toggle) {
        // 添加 no-loader 类来阻止加载动画
        toggle.classList.add('no-loader');
        
        toggle.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            // 获取父级菜单项和子菜单
            const menuItem = this.closest('.has-submenu');
            const submenu = this.nextElementSibling;
            const arrow = this.querySelector('.submenu-arrow');
            
            // 如果当前菜单已经打开，则关闭它
            if (menuItem.classList.contains('open')) {
                menuItem.classList.remove('open');
                submenu.style.display = 'none';
                if (arrow) arrow.style.transform = 'rotate(0)';
            } else {
                // 关闭其他打开的菜单
                document.querySelectorAll('.has-submenu.open').forEach(function(item) {
                    item.classList.remove('open');
                    const openSubmenu = item.querySelector('.sidebar-submenu');
                    const openArrow = item.querySelector('.submenu-arrow');
                    if (openSubmenu) openSubmenu.style.display = 'none';
                    if (openArrow) openArrow.style.transform = 'rotate(0)';
                });
                
                // 打开当前菜单
                menuItem.classList.add('open');
                submenu.style.display = 'block';
                if (arrow) arrow.style.transform = 'rotate(180deg)';
            }
        });
    });
    
    // 初始化箭头状态
    document.querySelectorAll('.has-submenu.open .submenu-arrow').forEach(function(arrow) {
        arrow.style.transform = 'rotate(180deg)';
    });
});
</script>
{% block extra_js %}{% endblock %}
{% block scripts_1 %}{% endblock %}
{% endblock %} 
